<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick" class="my-tabs">
            <el-tab-pane label="停机" name="close"/>
            <el-tab-pane label="复机" name="open"/>
            <el-tab-pane label="出售" name="sale"/>
            <el-tab-pane label="导出" name="export"/>
            <el-tab-pane label="取消测试期" name="cancel"/>
            <div>
                <!--查询表单-->
                <div>
                    <el-form :inline="true" :model="searchFormData" class="demo-form-inline">
                        <el-form-item label="id">
                            <el-input v-model="searchFormData.beginId" placeholder="起始id" style="width:100px"/>
                            -
                            <el-input v-model="searchFormData.endId" placeholder="结束id" style="width:100px"/>
                        </el-form-item>
                        <el-form-item label="套餐">
                            <el-select v-model="searchFormData.comboCode" placeholder="请选择">
                                <el-option v-for="item in combos" :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="searchSubmit">查询</el-button>
                            <el-button type="primary" @click="operateSubmit">操作</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!--表格-->
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" height="500px" max-height="500px"
                          type="expand"
                          @selection-change="handleSelectionChange" id="batchOperateList">
                    <el-table-column prop="id" label="id" align="center"/>
                    <el-table-column prop="iccid" label="卡号" align="center"/>
                    <el-table-column prop="channelName" label="通道" align="center"/>
                    <el-table-column prop="poolName" label="流量池" align="center"/>
                    <el-table-column prop="comboName" label="套餐" align="center"/>
                    <el-table-column prop="used" label="已使用流量" align="center"/>
                    <el-table-column prop="left" label="剩余流量" align="center"/>
                    <el-table-column prop="total" label="累计使用流量" s align="center"/>
                    <el-table-column prop="customerName" label="客户" align="center"/>
                    <el-table-column prop="period" label="生命期" align="center"/>
                    <el-table-column prop="status" label="卡状态" align="center"/>
                    <el-table-column prop="closeStatus" label="是否主动停机" align="center"/>
                    <el-table-column prop="enterTime" label="入库时间" align="center"/>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="my_pagenation">
                    <pageHelper :current-page="page" :total="total" @sizeChange="handleSizeChange"
                                @currentChange="handleCurrentChange"></pageHelper>
                </div>
            </div>

        </el-tabs>
    </div>
</template>

<script>
    import pageHelper from '../common/pageHelper'
    import axios from 'axios'

    document.title = '卡板列表';
    export default {
        name: "batchOperateList",
        components: {pageHelper},
        data() {
            return {
                page: 1,
                size: 10,
                total: 120,
                activeName: 'close',
                tabName: 'close',
                cardOperateType: 'close',
                searchFormData: {
                    comboCode: null,
                    beginId: null,
                    endId: null
                },
                channels: [{label: "通道1", value: 1},
                    {label: "通道2", value: 2},
                    {label: "通道3", value: 3}],
                combos:
                    [{label: "套餐1", value: 1},
                        {label: "套餐2", value: 2},
                        {label: "套餐3", value: 3}],
                //如果tableData为空数组，勾选会出现异常(数组只能一次给定)
                tableData: [],
                multipleSelection: [],
            }
        },
        methods: {
            handleClick(tab, event) {
                this.tabName = tab.name;
                this.cardOperateType = tab.name;
                console.log('tab点击操作', this.name, tab, event);
                this.getData(this.page, this.size);
            },
            handleSelectionChange(val) {
                console.log("选项改变触发");
                console.log(val);
            },
            searchSubmit() {
                this.getData(this.page, this.size);
            },
            operateSubmit() {
                let url = this.getUrlByTatbName(this.tabName);
                console.log("操作提交==url", url);
                axios({
                    method: 'post',
                    url: API_PATH + url,
                    dataType: 'json',
                    params: {
                        comboCode: this.searchFormData.comboCode,
                        beginId: this.searchFormData.beginId,
                        endId: this.searchFormData.endId,
                        page: this.page,
                        size: this.size,
                        cardOperateType: this.cardOperateType,
                    }
                }).then(
                    res => {
                        if (res.data.code == 0) {
                            console.log('批量操作请求成功', res);
                        }
                    },
                    xhr => {
                        console.log('批量操作请求成功');
                    }
                )
            },
            getUrlByTatbName(tabName) {
                let url = '';
                switch (tabName) {
                    case 'sale':
                        return url = '/card/sale';
                    case 'close':
                        return url = '/card/close';
                    case 'open':
                        return url = '/card/open';
                    case 'cancel':
                        return url = '/card/cancel';
                    case 'export':
                        return url = '/card/export';
                    default:
                        return url;
                }
            },
            handleSizeChange(size) {
                this.size = size;
                this.getData(this.page, this.size);
            },
            handleCurrentChange(page) {
                this.page = page;
                this.getData(this.page, this.size);
            },
            getData: function (page, size) {
                console.log(`page= ${page}`, `size=${size}`);
                this.page = page || 1;
                this.size = size || 10;
                let loading = this.$loading(this.options);
                axios({
                    method: 'get',
                    url: API_PATH + '/card/operateQuery',
                    dataType: 'json',
                    params: {
                        comboCode: this.searchFormData.comboCode,
                        beginId: this.searchFormData.beginId,
                        endId: this.searchFormData.endId,
                        page: this.page,
                        size: this.size,
                        cardOperateType: this.cardOperateType,
                    }
                }).then(
                    res => {
                        if (res.data.code == 0) {
                            console.log('请求成功res', res);
                            this.tableData = res.data.data.list;
                            this.total = res.data.data.total;
                        }
                    },
                    xhr => {
                        console.log('请求失败');
                        this.$nextTick(() => {
                            console.log('关闭loading');
                            loading.close();
                        })
                    }
                )
                this.$nextTick(() => {
                    console.log('关闭loading');
                    loading.close();
                })
            },

        },
        mounted() {
            this.options = {
                text: '加载中...',
                background: 'rgba(0,0,0,0,1)',
                target: document.getElementById("batchOperateList")
            }
        }
    }
</script>

<style>
    .my-tabs .el-tabs__header {
        text-align: center;
    }

    .my-tabs .el-tabs__nav-wrap {
        display: inline-block;
    }
</style>
